<!--
 * @Author: ITDLCL
 * @Date: 2024-11-28 14:04:11
 * @LastEditors: ITDLCL
 * @Description:  空的页面缺省页
-->
<template>
  <view class="empty">
    <PageWarpper>
      <template v-slot:main>
        <view class="content">
          <Card
            :info="{
              icon: 'empty_icon',
              tip: '开发中',
              es: 'Developing',
              desc: '功能开发中，敬请期待！',
            }"
          />
        </view>
      </template>
    </PageWarpper>
    <FooterBar :tab-index="2" />
  </view>
</template>

<script setup>
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import Card from "./Card.vue";
</script>

<style lang="scss" scoped>
.empty {
  .content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    image {
      width: 246rpx;
    }
    .desc {
      margin-top: 56rpx;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      line-height: 34rpx;
      text {
        padding: 0 14rpx;
        margin-left: 8px;
        background: #000000;
        font-size: 24rpx;
        color: #ffffff;
        line-height: inherit;
      }
    }
    .tip {
      margin-top: 40rpx;
      font-size: 20rpx;
      color: var(--grey-text);
    }
  }
}
</style>
